<!--
  * desc：
  * author：王文军
  * date：  2021/6/11 9:09
-->
<template>
  <div class="my-outbox" >
    <div class="my-inbox" ref="box" >
      <div
          class="my-list"
          v-for="(item, index) in sendVal"
          :key="index"
          ref="list"
      >
        <span @click="onItemClick(item)"  class="my-uname">{{ item.detail }}</span>
      </div>
      <div
          class="my-list"
          v-for="(item, index) in sendVal"
          :key="index"
          ref="list"
      >
        <span @click="onItemClick(item)"  class="my-uname">{{ item.detail }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lz-marquee",
  props: {
    sendVal: Array,
    speed: {type: Number, default: 10},
  },
  data() {
    return {
      // 定时器标识
      moveTimer: null,
    };
  },
  mounted() {
    this.moveLeft();
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.moveTimer);
    // 清除定时器标识
    this.moveTimer = null;
  },
  methods: {
    // 获取margin属性
    getMargin(obj) {
      var marg = window.getComputedStyle(obj, null)["margin-right"];
      marg = marg.replace("px", "");
      return Number(marg); // 强制转化成数字
    },
    onItemClick(item) {
      this.$emit('clickNews', item);

    },
    // 移动的方法
    moveLeft() {
      var item = this.$refs.list;
      var len = this.sendVal.length;
      var inbox = this.$refs.box;
      // let width = inbox.clientWidth;

      var margin = this.getMargin(item[0]);
      var w = 0;
      for (var i = 0; i < len; i++) {
        w += item[i].clientWidth + margin;
      }

      // 移动距离
      var moveDis = 0;

      this.moveTimer = setInterval(function () {
        moveDis -= 0.5;
        if(moveDis < 0 && Math.abs(moveDis) >= Math.abs(w)) {
          // moveDis = width / 19;
          moveDis = 0;
        }
        // 移动外层盒子
        inbox.style.left = `${moveDis}px`;
        console.log(`${moveDis}px`);
      }, 10);
    },
  },
};
</script>

<style lang="less" scoped>
.my-outbox {
  overflow: hidden;
  height: 35px;
  position: relative;
  .my-inbox {
    position: absolute;
    white-space: nowrap;
    top: 0;
    left: 0;
    .my-list {
      padding-left: 20PX;
      display: inline-block;
      font-size: 0.3rem;
      height: 40px;
      line-height: 40px;
      .my-uname {
        color: black;
        font-size: 20px;
      }
    }
  }
}
</style>
